<#include "/common/head.ftl">

<@showTitle title="${i18n.getMessage('offering')} > ${i18n.getMessage('create_one')}">
</@showTitle>

<div id="error" style="display:none"></div>

<form action="offering/addOffering.sgt" validator="offering/validateOffering.sgt" onsubmit="submitFormValidation(this); return false;" onreset="$('error').hide()">
	<fieldset class="fs">
		<legend>Initial Info</legend>
		<table id="dataTable" cellspacing="5" cellpadding="0" align="center" style="width: 100%">
			<tr>
				<td class="name1"><@required/>${i18n.getMessage('name')}:</td>
				<td>
					<input type="text" name="name" style="width:190px"/>
				</td>
			</tr>
			<tr> 
				<td class="name1"><@required/>${i18n.getMessage('program')}:</td>
				<td>
					<select id="programId" name="programId" style="width:194px">
						<option value="0"></option>
						<#list programs as program>
							<option value="${program.id}">${program.name}</option>
						</#list>
					</select> <span id="progressMsg"></span>
				</td>
				<td class="name3"><@required/>${i18n.getMessage('startDate')}:</td>
				<td>
					<input type="text" name="startDate" style="width:150px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].startDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
			</tr>
			<tr>
				<td class="name1"><@required/>${i18n.getMessage('level')}:</td>
				<td>
					<select id="levelId" name="levelId" style="width:194px">
						<option></option>
					</select>
				</td>
				<td class="name3"><@required/>${i18n.getMessage('endDate')}:</td>
				<td>
					<input type="text" name="endDate" style="width:150px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].endDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
			</tr>
			<tr>
				<td class="name1">${i18n.getMessage('room')}:</td>
				<td>
					<select name="roomId" style="width:194px">
						<option></option>
						<#list locations as location>
							${request.setAttribute("rooms", location.rooms)}
							<optgroup label="${location.name}">
								<#list rooms as room>
									<option value="${room.id}">${room.name}</option>
								</#list>
							</optgroup>
						</#list>
					</select>
				</td>
				<td class="name3"><@required/>${i18n.getMessage('shift')}:</td>
				<td>
					<select name="shiftId" style="width:174px">
						<option></option>
						<#list shifts as shift>
							<option value="${(shift.id)!}">${(shift.startTime?time)!}-${(shift.endTime?time)!}</option>
						</#list>
					</select>
				</td>
			</tr>
		</table>
	</fieldset>
	<p>&nbsp;</p>
	<fieldset class="fs">
		<legend>Exam Dates</legend>
		<table id="dataTable" cellspacing="5" cellpadding="0" align="center" style="width: 100%">
			<tr>
				<td class="name1">${i18n.getMessage('midtermWrittenDate')}:</td>
				<td>
					<input type="text" name="midtermWrittenDate" style="width:140px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].midtermWrittenDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
				<td class="name2">${i18n.getMessage('certificateIssueDate')}:&nbsp;</td>
				<td style="padding-left:8px;">
					<input type="text" name="issueDate" style="width:150px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].issueDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
			</tr>
			<tr>
				<td class="name1">${i18n.getMessage('finalSpokenDate')}:</td>
				<td>
					<input type="text" name="finalSpokenDate" style="width:140px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].finalSpokenDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
				<td class="name2">${i18n.getMessage('cambridgeSpokenDate')}:&nbsp;</td>
				<td style="padding-left:8px;">
					<input type="text" name="cambridgeSpokenDate" style="width:150px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].cambridgeSpokenDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
			</tr>
			<tr>
				<td class="name1">${i18n.getMessage('finalWrittenDate')}:</td>
				<td>
					<input type="text" name="finalWrittenDate" style="width:140px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].finalWrittenDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
				<td class="name2">${i18n.getMessage('cambridgeWrittenDate')}:&nbsp;</td>
				<td style="padding-left:8px;">
					<input type="text" name="cambridgeWrittenDate" style="width:150px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].cambridgeWrittenDate, '${i18n.getMessage('format.date')}', this)"/>
				</td>
			</tr>
		<tr>
			
		</tr>
		</table>
	</fieldset>
	<p>&nbsp;</p>
	<fieldset class="fs">
		<legend>Instructors</legend>
		<table id="dataTable" cellspacing="5" cellpadding="0" align="center" style="width: 100%">
		<tr>
			<td class="name">${i18n.getMessage('monTeacher')}:</td>
			<td>
				<select name="monTeacherId" id="monTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('monTA')}:</td>
			<td>
				<select name="taMonTeacherId" id="taMonTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('tueTeacher')}:</td>
			<td>
				<select name="tueTeacherId" id="tueTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('tueTA')}:</td>
			<td>
				<select name="taTueTeacherId" id="taTueTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('wedTeacher')}:</td>
			<td>
				<select name="wedTeacherId" id="wedTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('wedTA')}:</td>
			<td>
				<select name="taWedTeacherId" id="taWedTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('thuTeacher')}:</td>
			<td>
				<select name="thuTeacherId" id="thuTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('thuTA')}:</td>
			<td>
				<select name="taThuTeacherId" id="taThuTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('friTeacher')}:</td>
			<td>
				<select name="friTeacherId" id="friTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('friTA')}:</td>
			<td>
				<select name="taFriTeacherId" id="taFriTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('satTeacher')}:</td>
			<td>
				<select name="satTeacherId" id="satTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('satTA')}:</td>
			<td>
				<select name="taSatTeacherId" id="taSatTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('sunTeacher')}:</td>
			<td>
				<select name="sunTeacherId" id="sunTeacherId" style="width:204px">
					<option></option>
					<#list teachers as teacher>
						<option value="${teacher.id}">${(teacher.fullName)!}</option>
					</#list>
				</select>
			</td>
			<td class="ta">${i18n.getMessage('sunTA')}:</td>
			<td>
				<select name="taSunTeacherId" id="taSunTeacherId" style="width:204px">
					<option></option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name" style="vertical-align:top">${i18n.getMessage('comment')}:</td>
			<td colspan="3"><textarea name="comment" style="width:300px;height:80px"></textarea></td>
		</tr>
		</table>
	</fieldset>
	<table id="dataTable" cellspacing="5" cellpadding="0" align="center">
		<tr>
			<td class="name"></td>
			<td>
				<input type="submit" value="${i18n.getMessage('add')}" class="button_style"/> 
				<input type="reset" value="${i18n.getMessage('reset')}" class="button_style"/> 
			</td>
		</tr>
	</table>
</form>

<@ajax.select baseUrl="programlevel.view" source="programId" target="levelId"
	parameters="programId={programId}" preFunction="initProgress"
	postFunction="resetProgress" />
	
<@ajax.select baseUrl="teachertasearch.view" source="monTeacherId" target="taMonTeacherId"
	parameters="teacherId={monTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="tueTeacherId" target="taTueTeacherId"
	parameters="teacherId={tueTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="wedTeacherId" target="taWedTeacherId"
	parameters="teacherId={wedTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="thuTeacherId" target="taThuTeacherId"
	parameters="teacherId={thuTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="friTeacherId" target="taFriTeacherId"
	parameters="teacherId={friTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="satTeacherId" target="taSatTeacherId"
	parameters="teacherId={satTeacherId}"/>
	
<@ajax.select baseUrl="teachertasearch.view" source="sunTeacherId" target="taSunTeacherId"
	parameters="teacherId={sunTeacherId}"/>